<template>
  <div class="app-container">
    <el-row class="pagecenter">
      <el-form :inline="true" style="float:right">
        <el-form-item label-width="80px">
          <el-button @click="addQualification" v-show="btnVisible.isAdd">
            <span>
              <icon-svg icon-class="xinjian"></icon-svg>&nbsp;&nbsp;新建企业资质</span>
          </el-button>
          <!-- <el-button icon="document" @click="handleDownload">导出excel</el-button> -->
        </el-form-item>
      </el-form>
    </el-row>
    <el-row class="pageborder">
      <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" highlight-current-row tooltip-effect="dark" style="width: 100%" :fit="true">
        <el-table-column align="center" label='序号' min-width="80" header-align="center">
          <template scope="scope">
            {{ page.pageSize * (page.currentPage - 1) + scope.$index + 1}}
          </template>
        </el-table-column>
        <!-- <el-table-column label="资质位置" width="100">
              <template scope="scope">
                {{scope.row.local}}
              </template>
            </el-table-column> -->
        <el-table-column label="资质名称" min-width="250" :show-overflow-tooltip="true" header-align="center" align="left">
          <template scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="排序编号" min-width="120" header-align="center" align="center">
          <template scope="scope">
            {{scope.row.orderno}}
          </template>
        </el-table-column>
        <el-table-column label="操作账号" min-width="180" header-align="center" align="left">
          <template scope="scope">
            {{scope.row.username}}
          </template>
        </el-table-column>
        <el-table-column label="设置时间" min-width="180" header-align="center" align="left">
          <template scope="scope">
            {{scope.row.createdate}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="当前状态" min-width="120" header-align="center">
          <template scope="scope">
            {{scope.row.statusname}}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="260" min-align="center" header-align="center">
          <template scope="scope">
            <el-button icon="edit" type="small" @click="editQualification(scope.$index,scope.row)" v-show="btnVisible.isEdit">编辑</el-button>
            <el-button type="small" @click="pauseQualification(scope.$index,scope.row)" v-show="btnVisible.isEnable">
              <span>
                <icon-svg v-show="scope.row.status === 0" icon-class="jinyong"></icon-svg>
                <icon-svg v-show="scope.row.status !== 0" icon-class="qiyong"></icon-svg>&nbsp;&nbsp;{{scope.row.status === 0? '禁用':'启用'}}</span>
            </el-button>
            <el-button icon="delete" type="small" @click="deleteQualification(scope.$index,scope.row)" v-show="btnVisible.isDelete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="pagination" v-if="page.total > 0 ? true : false">
      <el-pagination @current-change="handleCurrentChange" :page-size="page.pageSize" :current-page.sync="page.currentPage" layout="total, prev, pager, next, jumper" :total="page.total">
      </el-pagination>
    </el-row>
  </div>
</template>

<style scoped>
.pagination {
  text-align: center;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.colSpace {
  margin-left: 5px;
}

.cardbody {
  margin-top: 0px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.cardup {
  padding: 1px 10px;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.cardcontent {
  color: white;
}

.yesterday {
  font-size: 14px;
}

.carddown {
  padding: 10px 10px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.viewBtn {
  float: right;
}

.selectStyle {
  width: 145px;
}

.el-form-item {
  margin-bottom: 15px;
}
</style>

<script>
import { getList, updateQualificationStatus, deleteQualificationInfo } from 'api/qualifications';
import { parseTime } from 'utils/index';
import { btnIsVisible } from 'utils/customer';

export default {
  data() {
    return {
      list: null,
      listQuery: {},
      page: {
        pageSize: null,
        total: null,
        totalPage: null,
        currentPage: null
      },
      listLoading: true,
      btnVisible: {
        isEdit: false,
        isDelete: false,
        isEnable: false,
        isAdd: false
      },
    }
  },
  created() {
    // this.getProductType();
    this.fetchData();
    this.getBtnVisbleStatus();
  },
  methods: {
    getBtnVisbleStatus() {
      this.btnVisible.isEdit = btnIsVisible('ENTERPRISE_APTITUDE_UPDATE') || false;
      this.btnVisible.isAdd = btnIsVisible('ENTERPRISE_APTITUDE_INSERT') || false;
      this.btnVisible.isDelete = btnIsVisible('ENTERPRISE_APTITUDE_DELETE') || false;
      this.btnVisible.isEnable = btnIsVisible('ENTERPRISE_APTITUDE_START_STOP') || false;
    },
    fetchData() {
      this.listLoading = true;
      this.page.pageSize = this.page.pageSize || 10;
      this.page.currentPage = this.page.currentPage || 1;
      this.listQuery.currentPage = this.page.currentPage;
      this.listQuery.pageSize = this.page.pageSize;
      getList(this.listQuery).then(response => {
        let res = response.data;
        if (res.flag) {
          this.list = res.data;
          this.page = res.page;
        }
        this.listLoading = false;
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleDivisionChange(val) {
      // console.log(val);
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    addQualification(index, row) {
      this.$router.push({ path: 'qulificationadd' })
    },
    editQualification(index, row) {
      this.$router.push({ path: 'qulificationedit', query: { qulificationInfo: row } })
    },
    pauseQualification(index, row) {
      let requestParams = {
        id: row.id,
        status: row.status === 1 ? 0 : 1,
        operatorid: 1
      };
      updateQualificationStatus(requestParams).then(response => {
        let res = response.data;
        let tipName = requestParams.status === 1 ? '禁用成功' : '启用成功';
        if (res.flag === 1) {
          this.$message({
            showClose: true,
            message: '企业资质' + tipName,
            type: 'success'
          });
          this.fetchData();
        } else {
          this.$message({
            showClose: true,
            message: '企业资质' + tipName,
            type: 'error'
          });
        }
      })
    },
    deleteQualification(index, row) {
      this.$confirm('此操作将会永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let requestParams = {
          id: row.id,
          operatorid: 1
        };
        deleteQualificationInfo(requestParams).then(response => {
          let res = response.data;
          if (res.flag === 1) {
            this.$message({
              showClose: true,
              message: '企业资质删除成功',
              type: 'success'
            });
            this.fetchData();
          } else {
            this.$message({
              showClose: true,
              message: '企业资质删除失败',
              type: 'error'
            });
          }
        })
      }).catch(() => {
      });
      // let requestParams = {
      //   id: row.id,
      //   operatorid: 1
      // };
      // deleteQualificationInfo(requestParams).then(response => {
      //   let res = response.data;
      //   if (res.flag === 1) {
      //     this.$message({
      //       showClose: true,
      //       message: '企业资质删除成功',
      //       type: 'success'
      //     });
      //     this.fetchData();
      //   } else {
      //     this.$message({
      //       showClose: true,
      //       message: '企业资质删除失败',
      //       type: 'error'
      //     });
      //   }
      // })
    }
  }
};
</script>